<template>
  <div v-if="hasPerm('sysMachine:query')" class="container">

    <!-- 系统信息  Java信息-->
    <!-- <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="系统信息" style="margin-bottom: 20px;" :bordered="false">

          <table class="sysInfo_table">
            <tr >
              <td class="sysInfo_td">系统名称：</td>
              <td class="sysInfo_td">{{ this.sysOsInfo.osName }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">系统架构：</td>
              <td class="sysInfo_td">{{ this.sysOsInfo.osArch }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">系统版本：</td>
              <td class="sysInfo_td">{{ this.sysOsInfo.osVersion }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">主机名称：</td>
              <td class="sysInfo_td">{{ this.sysOsInfo.osHostName }}</td>
            </tr>

            <tr >
              <td >主机IP地址：</td>
              <td >{{ this.sysOsInfo.osHostAddress }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>

      <a-col :md="12" :sm="24">
        <a-card :loading="loading" title="Java信息" style="margin-bottom: 20px">
          <table class="sysInfo_table" >

            <tr >
              <td class="sysInfo_td">虚拟机名称：</td>
              <td class="sysInfo_td">{{ this.sysJavaInfo.jvmName }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">虚拟机版本：</td>
              <td class="sysInfo_td">{{ this.sysJavaInfo.jvmVersion }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">虚拟机供应商：</td>
              <td class="sysInfo_td">{{ this.sysJavaInfo.jvmVendor }}</td>
            </tr>

            <tr >
              <td class="sysInfo_td">java名称：</td>
              <td class="sysInfo_td">{{ this.sysJavaInfo.javaName }}</td>
            </tr>

            <tr >
              <td >java版本：</td>
              <td >{{ this.sysJavaInfo.javaVersion }}</td>
            </tr>
          </table>
        </a-card>
      </a-col>
    </a-row> -->

    <!-- <a-card :loading="loading" title="JVM内存信息" >
      <table class="sysInfo_table" >

        <tr >
          <td class="sysInfo_td">最大内存：</td>
          <td class="sysInfo_td">{{ this.sysJvmMemInfo.jvmMaxMemory }}</td>
          <td class="sysInfo_td">可用内存：</td>
          <td class="sysInfo_td">{{ this.sysJvmMemInfo.jvmUsableMemory }}</td>
        </tr>
        <tr >
          <td class="sysInfo_td">总内存：</td>
          <td class="sysInfo_td">{{ this.sysJvmMemInfo.jvmTotalMemory }}</td>
          <td class="sysInfo_td">已使用内存：</td>
          <td class="sysInfo_td">{{ this.sysJvmMemInfo.jvmUsedMemory }}</td>
        </tr>
        <tr class="sysInfo_tr">
          <td >空余内存：</td>
          <td >{{ this.sysJvmMemInfo.jvmFreeMemory }}</td>
          <td >使用率：</td>
          <td >{{ this.sysJvmMemInfo.jvmMemoryUsedRate }}</td>
        </tr>

      </table>
    </a-card> -->

    <a-row :gutter="24">
      <a-col :md="12" :sm="24">
        <div class="title">系统信息</div>
        <ol><span class="sysname">系统名称：</span> <span class="sysmessage">{{ this.sysOsInfo.osName }}</span></ol>
        <ol><span class="sysname">系统架构：</span> <span class="sysmessage">{{ this.sysOsInfo.osArch }}</span></ol>
        <ol><span class="sysname">系统版本：</span> <span class="sysmessage">{{ this.sysOsInfo.osVersion }}</span></ol>
        <ol><span class="sysname">主机名称：</span> <span class="sysmessage">{{ this.sysOsInfo.osHostName }}</span></ol>
        <ol><span class="sysname">主机地址：</span> <span class="sysmessage">{{ this.sysOsInfo.osHostAddress }}</span></ol>
      </a-col>

      <a-col :md="12" :sm="24">
        <div class="title"> JAVA信息</div>
        <ol><span class="sysname">虚拟机名称：</span> <span class="sysmessage">{{ this.sysJavaInfo.jvmName }}</span></ol>
        <ol><span class="sysname">虚拟机版本：</span> <span class="sysmessage">{{ this.sysJavaInfo.jvmVersion }}</span></ol>
        <ol><span class="sysname">虚拟机供应商：</span> <span class="sysmessage">{{ this.sysJavaInfo.jvmVendor }}</span></ol>
        <ol><span class="sysname">java名称：</span> <span class="sysmessage">{{ this.sysJavaInfo.javaName }}</span></ol>
        <ol><span class="sysname">java版本：</span> <span class="sysmessage">{{ this.sysJavaInfo.javaVersion }}</span></ol>
      </a-col>
    </a-row>
    <div class="jvm">
      <div class="title"> JAVA信息</div>
        <div class="content">
          <ol><span class="sysname">最大内存：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmMaxMemory }}</span></ol>
          <ol><span class="sysname">可用内存：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmUsableMemory }}</span></ol>
          <ol><span class="sysname">总内存：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmTotalMemory }}</span></ol>
          <ol><span class="sysname">已使用内存：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmUsedMemory }}</span></ol>
          <ol><span class="sysname">空余内存：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmFreeMemory }}</span></ol>
          <ol><span class="sysname">使用率：</span> <span class="sysmessage">{{ this.sysJvmMemInfo.jvmMemoryUsedRate }}</span></ol>
        </div>
    </div>
  </div>

</template>

<script>
  import { sysMachineQuery } from '@/api/modular/system/machineManage'

  export default {
    data () {
      return {
        loading: true,
        sysOsInfo: [],
        sysJavaInfo: [],
        sysJvmMemInfo: []
      }
    },

    // 进页面加载
    created () {
      this.loadDataList()
    },

    methods: {
      // 加载数据方法
      loadDataList () {
        sysMachineQuery().then((res) => {
          this.loading = false
          this.sysOsInfo = res.data.sysOsInfo
          this.sysJavaInfo = res.data.sysJavaInfo
          this.sysJvmMemInfo = res.data.sysJvmMemInfo
        })
      }
    }

  }
</script>
<style>
  /* .ant-col-md-12 .ant-card .ant-card-body {
    background: none;
    min-height: auto;
    border-top: 1px solid;
  }
  .ant-col-md-12 .ant-row .ant-card {
    background: #0f3234;
    border: none;
  }
  .ant-card, .ant-card-head {
    color: rgb(255 255 255);
    border: none;
  }
  .ant-card-bordered .ant-card-body {
    min-height: auto;
    background: #0f3234 none;
    border-top: 1px solid #fff;
  }
  .ant-card-head {
    color: rgb(255 255 255);
    background-color: #0D5B6A;
    color: #17DDF0;
  }
  .ant-card{
    background-color: #0D3238;
  }
  .ant-card-bordered .ant-card-body{
    background-color: #0D3238;
  } */
</style>
<style lang="less" scoped>
  // .sysInfo_table{
  //   width: 100%; min-height: 45px; line-height: 45px; text-align: center;
  // }
  // .sysInfo_td {
  // border-bottom:1px solid #e8e8e8;
  // }
  .container{
    width: 100%;
    height: 100%;
    // background-color: #fff;
    .ant-row{
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 50px;
      .ant-col-md-12{
        // background-color: red;
        width: 45%;
        height: 365px;
        background-image: url(~@/assets/img/tablebg1.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .title{
          color: #16D1E4;
          font-size: 21px;
          padding-left: 20px;
          padding-top: 4px;
        }
        ol{
          width: 80%;
          height: 10%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          color: #fff;
          position: relative;
          margin-left: 60px;
          margin-top: 22px;
          border-bottom: 1px solid #16D1E4;
          &::after{
            content: '';
            width: 3px;
            height: 20px;
            background-color: #19ECFF;
            position: absolute;
            top: 6px;
            left: 0;
          }
          &:last-child{
            border-bottom: none;
          }
          .sysname{
            transform: translateX(-20px);
          }
        }
      }
    }
    .jvm{
      // width: 94%;
      width: 1530px;
      height: 278px;
      background-image: url(~@/assets/img/tablebg2.png);
      background-size: 100% 100%;
      margin: 0 auto;
      margin-top: 50px;
      transform: translateX(14px);
      .title{
        color: #16D1E4;
        font-size: 21px;
        padding-left: 30px;
        padding-top: 4px;
      }
      .content{
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 40px;
        ol{
          width: 40%;
          height: 14%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 18px;
          color: #fff;
          position: relative;
          margin-left: 60px;
          padding-bottom: 16px;
          border-bottom: 1px solid #16D1E4;
          transform: translateX(-30px);
          &::after{
            content: '';
            width: 3px;
            height: 20px;
            background-color: #19ECFF;
            position: absolute;
            top: -4px;
            left: 0;
          }
          &:last-child{
            border-bottom: none;
          }
          &:nth-child(5){
            border-bottom: none;
          }
          .sysname{
            transform: translateX(-20px);
          }
        }
      }
    }
  }
</style>
